<template>
  <head-top :loading="loading" class="share">
    <view class="share_top">
      <u-image src="https://kaixintaomall.oss-cn-guangzhou.aliyuncs.com/file/banneri.png" height="688rpx"
        :lazy-load="true" width="750rpx"></u-image>
    </view>
    <view class="share_img">
      <view class="share_img_top">
        <u-image src="@/static/tabs/buku2.png" radius="10px" :lazy-load="true" width="200rpx" height="200rpx"
          mode="aspectFit"></u-image>
      </view>
      <view class="share_img_content">
        <view class="share_img_content_top">
          <u-image src="@/static/tabs/buku2.png" radius="50%" :lazy-load="true" width="40rpx" height="40rpx"
            mode="aspectFit"></u-image>
        </view>
        <view class="share_img_content_title">我是名臣</view>
      </view>
    </view>
    <view class="share_list">
      <view class="share_list_head">
        <view class="share_list_title">
          已分享123个福袋，仅差30个免单备份
        </view>
        <view class="share_progress">
          <u-line-progress :percentage="30" height="10rpx" activeColor="#FF4201" inactiveColor="#FFE6B6"
            :showText="false"></u-line-progress>
        </view>
        <button class="share_shareBtn" open-type="share">再邀请30人，可免单</button>
      </view>
      <view class="share_content">
        <view class="share_content_hisory">抢福袋记录</view>
        <view class="tou">
          <view class="tou_list" v-for="i in 6" :key="i">
            <view class="tou_left">
              <!-- mode="aspectFit" -->
              <u-image src="@/static/tabs/buku2.png" radius="50%" :lazy-load="true" width="88rpx"
                height="88rpx"></u-image>
              <view class="tou_left_title">
                <text class="f28">哈哈哈哈</text>
                <text>8月14日 14:32</text>
              </view>
            </view>
            <view class="tou_right">
              抢了100个福袋
            </view>
          </view>
        </view>
      </view>
      <!-- <b-list :isPading="false"></b-list> -->
      <view class="share_content">
        <view class="share_content_hisory marginTop">其它免单申请</view>
        <BshareList></BshareList>
      </view>
    </view>
  </head-top>
</template>
<script setup lang="ts">
import { ref } from "vue";
import BList from '@/components/BList/index.vue'
import BshareList from '@/components/BshareList/BshareList.vue'
const loading = ref<boolean>(false)
</script>
<style scoped lang="scss">
@import './index.scss'
</style>